<template>
    <view class="chanapp">

        <view class="caiwu">
            <view>
                <u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
            </view>
            <view>产品列表</view>
            <view><img src="/static/img/tian.png" alt="" style="width: 20px;height: 20px;"></view>
        </view>
        <view class="inp"><input type="text" placeholder="搜索产品称或编号"></view>

        <view class="content">
            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>

            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>


            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>
            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>
            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>
            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>
            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>
            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>
            <view class="content_z">
                <view><img src="/static/img/tupian.png" alt="" style="width: 50px;height: 50px;"></view>
                <view>
                    <p>尊贵钻石VIP年会员</p>
                    <p>CP20190808001</p>
                </view>
                <view>
                    <p>价格(元/年)</p>
                    <p style="color: red;">￥ 10,000.00</p>
                </view>
                <view>
                    &gt;
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
const icon = () => {
    uni.navigateBack({
        delta: 1
    })
}
</script>
<style lang="scss">
.content_z {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #eee;
    box-shadow: 0 0 10px #eee;
    margin: 10px;
}
.content{
    height: calc(100vh - 100px - 50px);
    overflow: hidden;
    overflow-y: scroll;
}
.chanapp {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.inp {
    // width: 360px;
    background-color: #eee;
    height: 50px;
    overflow: hidden;

    input {
        width: 360px;
        height: 30px;
        margin-top: 10px;
        margin-left: 8px;
        border: 1px solid #ccc;
        border-radius: 15px;
        background-color: white;
    }
}

.caiwu {
    display: flex;
    padding: 20px 20px;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
    margin-top: 30px;
}
</style>